<template>
  <div class="global-nav-flex">
    <div class="global-nav-btns">
      <div v-show="showBack" class="btns-item back" @click="goBack">
        <i class="el-icon-arrow-left icon" />
      </div>
      <slot>
        <div class="btns-item">
          <b>{{ title }}</b>
        </div>
      </slot>
    </div>
    <div class="global-nav-op" :style="buttonStyle">
      <slot name="button" />
    </div>
  </div>
</template>
<script>
/**
 * 按钮操作区
 */
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: true
    },
    // 右边区域按钮样式
    buttonStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    goBack() {
      this.$emit('goBack')
    }
  }
}
</script>
<style lang="scss" scoped>
.global-nav-flex {
  display: flex;
  height: 49px;
  line-height: 49px;

  .global-nav-btns {
    flex: 1 1 auto;
  }
  .global-nav-op {
    flex: 1 1 165px;
    text-align: right;
  }
}
.global-nav-btns {
  white-space: nowrap;
  .back {
    cursor: pointer;
    .icon {
      font-size: 20px;
      font-weight: bold;
      vertical-align: text-bottom;
    }
  }
  .btns-item {
    display: inline-block;
    padding-right: 20px;
    font-size: 16px;

    .el-button--text {
      color: #333;
    }
  }
}
</style>
